<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改【请填写功能名称】')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-doc-edit" th:object="${sysDoc}">
            <input name="docid" th:field="*{docid}" type="hidden">

            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">标题：</label>
                    <div class="col-sm-8">
                        <input name="title" th:field="*{title}" class="form-control" type="text">
                    </div>
                </div>
            </div>

            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">关键字：</label>
                    <div class="col-sm-8">
                        <input name="keyword" th:field="*{keyword}" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">简介：</label>
                    <div class="col-sm-8">
                        <textarea name="word" class="form-control">[[*{word}]]</textarea>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">可免费预览：</label>
                    <div class="col-sm-8">
                        <input name="preview" th:field="*{preview}" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">阅读售价：</label>
                    <div class="col-sm-8">
                        <input name="readpay" th:field="*{readpay}" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">下载售价：</label>
                    <div class="col-sm-8">
                        <input name="downpay" th:field="*{downpay}" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-4 control-label">推荐：</label>
                    <div class="col-sm-8">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="isimp" th:checked="${sysDoc.isimp == 1 ? true : false}">
                            <span></span>
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">vip：</label>
                    <div class="col-sm-8">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="isvip" th:checked="${sysDoc.isvip == 1 ? true : false}">
                            <span></span>
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">审核：</label>
                    <div class="col-sm-8">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="state" th:checked="${sysDoc.state == 1 ? true : false}">
                            <span></span>
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">下架：</label>
                    <div class="col-sm-8">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="isdel" th:checked="${sysDoc.isdel == 1 ? true : false}">
                            <span></span>
                        </label>
                    </div>
                </div>
            </div>
            <p>分类</p>
            <div id="element1" class="row">
                <div class="col-sm-2">
                    <select id="province" class="province form-control m-b" data-first-title="选择分类">
                        <option value="">请选择</option>
                        <option th:value="${typeid2}" selected>南山区</option>
                    </select>
                </div>
                <div class="col-sm-2">
                    <select id="city" class="city form-control m-b" data-first-title="选择分类">
                        <option value="">请选择</option>
                        <option th:value="${typeid1}" selected>南山区</option>
                    </select>
                </div>
                <div class="col-sm-2">
                    <select id="area" class="area form-control m-b" data-first-title="选择分类">
                        <option value="">请选择</option>
                        <option th:value="${typeid}" selected>南山区</option>
                    </select>
                </div>
            </div>
            <p>附加分类</p>
            <div id="element2" class="row" th:utext="${filter}">



            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: jquery-cxselect-js" />
    <script th:inline="javascript">
        var prefix = ctx + "system/doc";
        $("#form-doc-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var values = [];
                $('#element2').find('select').each(function(){
                    values.push($(this).val());
                });
                var data = $('#form-doc-edit').serializeArray();
                var typeid = $("#area").val();
                var state = $("input[id='state']").is(':checked') == true ? 1 : 0;
                var isvip = $("input[id='isvip']").is(':checked') == true ? 1 : 0;
                var isimp = $("input[id='isimp']").is(':checked') == true ? 1 : 0;
                var isdel = $("input[id='isdel']").is(':checked') == true ? 1 : 0;
                data.push({"name": "state", "value": state});
                data.push({"name": "isvip", "value": isvip});
                data.push({"name": "isimp", "value": isimp});
                data.push({"name": "isdel", "value": isdel});
                data.push({"name": "typeid", "value": typeid});
                data.push({"name": "filter", "value": values.join(".")});
                $.operate.save(prefix + "/edit", data);
            }
        }
        $('#province').on('change', function() {
            // 获取选中的值
            var selectedValue = $(this).val();
                $.post(prefix + "/getfilter",
                    {
                        typeid:selectedValue
                    },
                    function(data){
                        $("#element2").html(data);
                    });
        });
        $('#city').on('change', function() {
            // 获取选中的值
            var selectedValue = $(this).val();
            $.post(prefix + "/getfilter",
                {
                    typeid:selectedValue
                },
                function(data){
                    $("#element2").html(data);
                });
        });
        $('#area').on('change', function() {
            // 获取选中的值
            var selectedValue = $(this).val();
            $.post(prefix + "/getfilter",
                {
                    typeid:selectedValue
                },
                function(data){
                    $("#element2").html(data);
                });
        });
        setTimeout(function(){
            var items = [[${items}]];
            items.forEach(function(item, index) {
                $('#element2').find('select').each(function(index1){
                    console.log(index+"="+item);
                    if(index==index1)
                        $(this).val(item);
                });
            });
        },3000);
    </script>
    <script th:inline="javascript">
        var urlChina = 'cityData';
        $.cxSelect.defaults.url = urlChina;
        $('#element1').cxSelect({
            selects: ['province', 'city', 'area'],
            jsonValue: 'v',
            nodata: 'none',
            required:true
        });




    </script>
</body>
</html>